/* ============================================
   0) 공통 토큰: 라이트 / 다크 기본값
   ============================================ */

/* 라이트 모드 */
:root {
  /* Layout */
  --header-height: 50px; /* ▼ 60px → 50px */
  --radius-xl: 30px;
  --radius-lg: 18px;
  --radius-md: 12px;

  /* Light Surface */
  --surface-bg: #f5f5f8;
  --surface-elevated: rgba(255, 255, 255, 0.8);  /* 살짝 더 투명하게 */
  --surface-item: rgba(255, 255, 255, 0.78);
  --surface-border: rgba(15, 23, 42, 0.06);

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #9ca3af;

  /* Accent (2025 블루+퍼플) */
  --accent-main: #6366f1;
  --accent-main-2: #231e7fff;
  --accent-soft: rgba(99, 102, 241, 0.08);

  /* Shadow */
  --shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.12);
  --shadow-strong: 0 22px 70px rgba(15, 23, 42, 0.32);

  /* Header 전용 3D 그림자 */
  --header-shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.18);
  --header-shadow-strong: 0 26px 70px rgba(15, 23, 42, 0.32);

  /* Dropdown radius */
  --bs-dropdown-border-radius: 30px;
}

/* 다크 모드 */
[data-bs-theme="dark"] {
  --surface-bg: radial-gradient(circle at top left, #111827 0%, #020617 45%, #020617 100%);
  --surface-elevated: rgba(15, 23, 42, 0.9);
  --surface-item: rgba(15, 23, 42, 0.9);
  --surface-border: rgba(148, 163, 184, 0.18);

  --text-primary: #e5e7eb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --accent-main: #8b5cf6;
  --accent-main-2: #491a82ff;
  --accent-soft: rgba(139, 92, 246, 0.16);

  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.7);
  --shadow-strong: 0 28px 80px rgba(0, 0, 0, 0.9);

  --header-shadow-soft: 0 18px 36px rgba(0, 0, 0, 0.75);
  --header-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.9);

  --bs-dropdown-border-radius: 30px;
}

/* ============================================
   1) 전체 헤더 / 네비게이션 바 (3D 강화)
   - 헤더 영역(#hd) 안에 있는 navbar만 커스텀
   ============================================ */

#hd .navbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  height: var(--header-height);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--surface-border);
  box-shadow: var(--header-shadow-soft);
  isolation: isolate;
  overflow: visible; /* 드롭다운 / 햄버거가 잘리지 않도록 */

  /* 둥근 캡슐 느낌 */
  margin: 6px 10px 0;
  padding-inline: 14px;
  border-radius: 999px;
}

[data-bs-theme="dark"] #hd .navbar {
  border-bottom-color: rgba(148, 163, 184, 0.25);
  box-shadow: var(--header-shadow-soft);
}

/* 헤더 아래쪽 타원형 그림자 (3D 떠있는 느낌) */
#hd .navbar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 76%;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(15, 23, 42, 0.32),
    transparent 70%
  );
  filter: blur(20px);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}

[data-bs-theme="dark"] #hd .navbar::after {
  background: radial-gradient(
    ellipse at center,
    rgba(15, 23, 42, 0.9),
    transparent 70%
  );
}

/* 로고 영역 여백 (헤더 줄어든 만큼 조금 줄임) */
#hd .navbar .container,
#hd .navbar .container-fluid {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  position: relative;
  z-index: 1; /* ::before/::after 위로 */
}

/* 브랜드(로고 텍스트) */
#hd .navbar-brand {
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--text-primary) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.7),
    0 6px 18px rgba(15,23,42,0.25);
}

/* 브랜드 옆 pill 라벨 */
#hd .navbar-brand::after {
  content: "LIVE";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.46rem;
  border-radius: 999px;
  margin-left: 0.15rem;
  background: radial-gradient(circle at 0 0, #f97316, var(--accent-main));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.5),
    0 8px 18px rgba(99,102,241,0.7);
}

[data-bs-theme="dark"] #hd .navbar-brand::after {
  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.9),
    0 0 0 1px rgba(255,255,255,0.35);
}

/* ============================================
   2) 상단 메뉴 텍스트 / 호버 (3D pill 느낌)
   ============================================ */

#hd .navbar-nav .nav-link {
  position: relative;
  font-weight: 600;
  padding: 0.32rem 0.9rem;
  margin: 0 0.14rem;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(148,163,253,0);
  transform: translateY(0);
  transition:
    color 0.18s ease-out,
    background-color 0.18s ease-out,
    transform 0.16s ease-out,
    box-shadow 0.2s ease-out;
  color: var(--text-secondary);
}

#hd .navbar-nav .nav-link:hover,
#hd .navbar-nav .nav-link:focus {
  background-color: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(148,163,253,0.35);
  color: var(--text-primary);
}

/* 활성 메뉴 */
#hd .navbar-nav .nav-link.active,
#hd .navbar-nav .show > .nav-link {
  color: var(--text-primary);
  background: linear-gradient(
    120deg,
    rgba(148, 163, 253, 0.26),
    rgba(248, 113, 113, 0.18)
  );
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.32),
    0 0 0 1px rgba(148, 163, 253, 0.6);
  transform: translateY(-1px);
}

[data-bs-theme="dark"] #hd .navbar-nav .nav-link {
  color: var(--text-muted);
}

[data-bs-theme="dark"] #hd .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] #hd .navbar-nav .nav-link:focus {
  color: #e5e7eb;
}

/* ============================================
   3) 드롭다운 기본 컨테이너 (1단계)
   - 헤더 안에서만 Bootstrap dropdown 커스텀
   ============================================ */

#hd .dropdown-menu {
  min-width: 0;
  width: max-content;
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--bs-dropdown-border-radius) !important;
  border: 1px solid var(--surface-border);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
  transform-origin: top center;
  z-index: 1050;

  opacity: 0;
  transform: translateY(6px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.2s ease-out,
    box-shadow 0.22s ease-out;
}

#hd .dropdown-menu.show,
#hd .navbar .dropdown:hover > .dropdown-menu,
#hd #gnb .dropdown:hover > .dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#hd .dropdown-menu:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(0) scale(1.02);
}

[data-bs-theme="dark"] #hd .dropdown-menu {
  background: rgba(10, 25, 62, 0.52);
  box-shadow: var(--shadow-strong);
}

#hd .navbar .dropdown > .dropdown-menu {
  margin-top: 0 !important;
}

/* ============================================
   4) 서브 드롭다운 (2단/3단)
   ============================================ */

#hd .dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 10px;
  margin-top: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 22px !important;
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);

  min-width: 0;
  width: max-content;
  display: inline-block;

  opacity: 0;
  transform: translateX(-6px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.2s ease-out,
    box-shadow 0.22s ease-out;
}

#hd .dropdown-menu .dropdown.show > .dropdown-menu,
#hd .dropdown-menu .dropdown:hover > .dropdown-menu {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

#hd .dropdown-menu .dropdown:hover > .dropdown-menu:hover {
  box-shadow: var(--shadow-strong);
  transform: translateX(0) scale(1.02);
}

[data-bs-theme="dark"] #hd .dropdown-menu .dropdown-menu {
  background: rgba(67, 24, 208, 0.57);
}

#hd .dropdown-menu .dropdown:hover > .dropdown-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 10px;
  height: 100%;
}

/* header 안에서만 toggle 화살표 커스텀 */
#hd .dropdown-toggle::after {
  margin-left: 0.3rem;
}

/* ============================================
   5) 드롭다운 아이템
   ============================================ */

#hd .dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0.48rem 0.9rem;
  margin: 2px 0;
  border-radius: var(--radius-lg);
  font-weight: 500;
  white-space: nowrap;

  transition:
    transform 0.14s ease-out,
    box-shadow 0.16s ease-out;
}

#hd .dropdown-item span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#hd .dropdown-item small {
  margin-left: 0.9rem;
  transition: color 0.16s ease-out;
}

#hd .dropdown-item:hover,
#hd .dropdown-item:focus {
  background: radial-gradient(
    circle at top left,
    rgba(148, 163, 253, 0.2),
    rgba(244, 114, 182, 0.2)
  );
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(148, 163, 253, 0.5);
}

[data-bs-theme="dark"] #hd .dropdown-item:hover,
[data-bs-theme="dark"] #hd .dropdown-item:focus {
  color: #e5e7eb;
}

#hd .dropdown-item:hover small,
#hd .dropdown-item:focus small {
  color: var(--text-primary);
}

#hd .dropdown-item.active,
#hd .dropdown-item.active:hover,
#hd .dropdown-item.active:focus {
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

#hd .dropdown-item.disabled,
#hd .dropdown-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#hd .dropdown-divider {
  margin: 0.4rem 0;
  border-top: 1px solid var(--surface-border);
  opacity: 0.8;
}

/* ============================================
   7) 부트스트랩 모바일 대응 (리퀴드 글래스 햄버거)
   ============================================ */

@media (max-width: 991.98px) {
  #hd .navbar {
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
  }

  #hd .navbar-collapse {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    margin-top: 0;
    max-width: 100vw;

    border-radius: 0 0 24px 24px;
    padding: 0.6rem 0.8rem 0.9rem;

    background: rgba(255,255,255,0.1);
    box-shadow:
      0 22px 60px rgba(15,23,42,0.35),
      0 0 0 1px rgba(255,255,255,0.35);

    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);

    overflow: hidden;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height) - 6px);

    z-index: 1045;
  }

  [data-bs-theme="dark"] #hd .navbar-collapse {
    background: rgba(15,23,42,0.75);
    box-shadow:
      0 24px 70px rgba(0,0,0,0.85),
      0 0 0 1px rgba(148,163,253,0.35);
  }

  #hd .dropdown-menu {
    position: static;
    transform: none !important;
    box-shadow: none;
    margin-top: 0.3rem;
    width: 100%;
    border-radius: 18px !important;
    opacity: 1;
    pointer-events: auto;
    min-width: 0;
    display: block;
    background: transparent;
    border: none;
    backdrop-filter: none;
  }

  #hd .dropdown-menu .dropdown-menu {
    position: static;
    margin: 0.2rem 0 0.3rem;
    border-radius: 16px !important;
    box-shadow: none;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    min-width: 0;
    display: block;
    background: transparent;
    border: none;
  }

  #hd .navbar-nav .nav-link {
    width: 100%;
    border-radius: 14px;
    padding: 0.5rem 0.8rem;
  }

  #hd .navbar .dropdown-menu .dropdown-item,
  #hd .navbar .dropdown-menu .dropdown-item span,
  #hd .navbar .dropdown-menu .dropdown-item small {
    color: var(--text-primary) !important;
  }

  [data-bs-theme="dark"] #hd .navbar .dropdown-menu .dropdown-item,
  [data-bs-theme="dark"] #hd .navbar .dropdown-menu .dropdown-item span,
  [data-bs-theme="dark"] #hd .navbar .dropdown-menu .dropdown-item small {
    color: #e5e7eb !important;
  }
}

/* ============================================
   8) (그누보드) gnb_1dul / gnb_2dul 공통
   ============================================ */

#gnb_1dul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#gnb_1dul .gnb_1dli {
  position: relative;
}

/* 1단 메뉴 텍스트 */
#gnb_1dul .gnb_1da {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-weight: 650;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;

  background: rgb(236 3 3 / 13%);
  box-shadow:
    0 6px 16px rgba(15,23,42,0.16),
    0 0 0 1px rgba(148,163,253,0.12);

  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  transform: translateY(0);
  transition:
    background 0.18s ease-out,
    color 0.18s ease-out,
    box-shadow 0.22s ease-out,
    transform 0.18s ease-out;
}

#gnb_1dul .gnb_1da:hover {
  background: rgba(163, 140, 140, 0.2);
  color: var(--text-primary);
  box-shadow:
    0 10px 22px rgba(15,23,42,0.26),
    0 0 0 1px rgba(148,163,253,0.45);
  transform: translateY(-2px);
}

[data-bs-theme="dark"] #gnb_1dul .gnb_1da {
  background: rgba(15,23,42,0.7);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.65),
    0 0 0 1px rgba(148,163,253,0.25);
  color: var(--text-primary);
}

/* 햄버거 토글 버튼 */
#gnb_1dul .btn_gnb_op {
  border: none;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* + / - 표시 (기본은 ▾, 열리면 위로) */
#gnb_1dul .btn_gnb_op::before {
  content: "▾";
  opacity: 0.85;
  transition: transform 0.22s.ease, opacity 0.2s ease;
}

#gnb_1dul .btn_gnb_op.btn_gnb_cl::before {
  transform: rotate(180deg);
  opacity: 1;
}

/* 2단 서브메뉴 컨테이너 (PC 기준) – 파스텔 리퀴드 글래스 */
.gnb_2dul {
  position: absolute;
  top: 100%;
  left: 10px;
  margin-top: 0.4rem;
  padding: 0.45rem 0.6rem;

  border-radius: 18px !important;
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 20px 40px rgba(15,23,42,0.20);


  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  min-width: 160px;
  width: max-content;
  display: inline-block;
  white-space: nowrap;

  list-style: none;

  opacity: 0;
  transform: translateY(6px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.2s ease-out,
    box-shadow 0.22s ease-out;
}

/* PC hover 시 */
#gnb .gnb_1dli:hover > .gnb_2dul {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* JS에서 style="display: block" 강제할 때도 보이도록 (PC) */
.gnb_2dul[style*="display: block"] {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* 서브 전체에 호버 시 3D 강조 */
.gnb_2dul:hover {
  box-shadow: 0 24px 60px rgba(15,23,42,0.30);
  transform: translateY(0) scale(1.02);
}

/* 2단 서브 항목 li */
.gnb_2dli {
  margin: 3px 0;
}

/* 2단 서브 링크 */
.gnb_2dul .gnb_2da {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.48rem;

  padding: 8px 16px;
  border-radius: 14px;

  text-indent: 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
  overflow: visible !important;
  white-space: nowrap;

  font-weight: 500;
  text-decoration: none;

  color: var(--text-primary);

  box-shadow: 0 0 0 0 rgba(15,23,42,0);
  transition:
    background 0.18s ease-out,
    color 0.16s ease-out,
    box-shadow 0.2s ease-out,
    transform 0.16s.ease-out;
}

/* 필요 없으면 점 숨겨도 됨
.gnb_2dul .gnb_2da span {
  display: none;
}
*/

/* 호버 효과 (3D + 글로우) */
.gnb_2dul .gnb_2da:hover {
  background: radial-gradient(
    circle at top left,
    rgba(129, 140, 248, 0.20),
    rgba(244, 114, 182, 0.20)
  ) !important;
  box-shadow:
    0 8px 22px rgba(15,23,42,0.25),
    0 0 0 1px rgba(148, 163, 253, 0.70);
  transform: translateY(-1px);
}

/* 다크 모드 gnb 서브 배경 */
[data-bs-theme="dark"] .gnb_2dul {
  background:
    radial-gradient(circle at 0 0,
      rgba(56,189,248,0.32),
      transparent 55%),
    radial-gradient(circle at 100% 0,
      rgba(29, 43, 166, 0.38),
      transparent 55%),
    linear-gradient(135deg,
      rgba(15,23,42,0.98),
      rgba(17,24,39,0.99),
      rgba(15,23,42,1.0));
  border-color: rgba(148,163,184,0.55);
  box-shadow: 0 26px 70px rgba(0,0,0,0.90);
}

[data-bs-theme="dark"] .gnb_2dul .gnb_2da {
  color: #e5e7eb !important;
}

/* ============================================
   9) (그누보드) 모바일 전용 (햄버거 안)
   ============================================ */

@media (max-width: 991.98px) {
  #gnb_1dul {
    flex-direction: column;
    gap: 0.1rem;
  }

  #gnb_1dul .gnb_1dli {
    width: 95%;
  }

  #gnb_1dul .gnb_1da {
    width: 98%;
    justify-content: space-between;
    padding: 0.55rem 0.8rem;
  }

  .gnb_2dul {
    position: static;
    margin-top: 0.12rem;
    margin-left: 20px;
    width: 90%;
    border-radius: 18px !important;
    box-shadow: none;
    border: none;


    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
      max-height 0.28s ease,
      opacity 0.2s ease,
      transform 0.22s ease;
  }

  .gnb_2dul[style*="display: block"] {
    max-height: 100%;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .gnb_2dul .gnb_2da {
    padding: 9px 18px;
  }

  [data-bs-theme="dark"] .gnb_2dul {
    background: linear-gradient(
      135deg,
      rgba(15,23,42,0.98),
      rgba(17,24,39,0.99)
    );
  }

  [data-bs-theme="dark"] .gnb_2dul .gnb_2da {
    color: #e5e7eb !important;
  }
}

/* ============================================
   10) 가운데 메인 드롭다운 (공지/갤러리/유튜브/자유게시판)
   – 리퀴드 글래스 컬러 버전
   ============================================ */

#hd .dropdown-menu.main-bg {
  position: absolute;
  min-width: 0;
  width: max-content;
  max-width: min(360px, 90vw);

  padding: 6px 10px;
  border-radius: 10px !important;

  border: 1px solid rgba(0, 0, 0, 0);

  background:
    radial-gradient(circle at 0 0,
      rgba(59,130,246,0.18),
      transparent 55%),
    radial-gradient(circle at 100% 0,
      rgba(56,189,248,0.18),
      transparent 55%),
    linear-gradient(135deg,
      rgba(255,255,255,0.90),
      rgba(240,249,255,0.86),
      rgba(219,234,254,0.82));
  box-shadow:
    0 20px 40px rgba(15,23,42,0.25),
    0 0 0 1px rgba(255,255,255,0.70),
    inset 0 0 0 1px rgba(255,255,255,0.22);

  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);

  overflow: hidden;

  margin-top: -0.30rem;
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.22s ease-out,
    margin-top 0.22s ease-out,
    box-shadow 0.28s ease-out,
    border-color 0.22s ease-out;
}

[data-bs-theme="dark"] #hd .dropdown-menu.main-bg {
  background:
    radial-gradient(circle at 0 0,
      rgba(56,189,248,0.32),
      transparent 55%),
    radial-gradient(circle at 100% 0,
      rgba(129,140,248,0.32),
      transparent 55%),
    linear-gradient(135deg,
      rgba(15,23,42,0.96),
      rgba(17,24,39,0.96),
      rgba(15,23,42,0.98));
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow:
    0 24px 55px rgba(0,0,0,0.85),
    0 0 0 1px rgba(15,23,42,0.95),
    inset 0 0 0 1px rgba(148,163,184,0.18);
  color: var(--text-primary);
}

#hd .dropdown-menu.main-bg::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 14%;
  right: 14%;
  height: 18px;
}

#hd .dropdown-menu.main-bg.show {
  opacity: 1;
  margin-top: 0.16rem;
  pointer-events: auto;
  box-shadow:
    0 28px 70px rgba(15,23,42,0.40),
    0 0 0 1px rgba(255,255,255,0.82),
    inset 0 0 0 1px rgba(255,255,255,0.28);
}

#hd .dropdown-menu.main-bg > li + li {
  margin-top: 0.18rem;
}

#hd .dropdown-menu.main-bg .dropdown-item {
  position: relative;
  display: flex;
  align-items: center;

  padding: 8px 10px;
  border-radius: 16px;

  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;

  text-decoration: none;

background: linear-gradient(
  135deg,
  rgba(79, 56, 172, 0.96),
  rgba(10, 19, 96, 0.5)
) !important;
/* 연보라 → 파스텔 블루 그라데이션 */
  box-shadow:
    0 0 0 0 rgba(15,23,42,0),
    inset 0 0 0 0 rgba(255,255,255,0);

  transform: translateY(0);
  transition:
    background 0.18s ease-out,
    color 0.18s ease-out,
    box-shadow 0.22s ease-out,
    transform 0.18s.ease-out;
}

#hd .dropdown-menu.main-bg .dropdown-item::before {
  display: none !important;
  width: 0;
  height: 0;
  margin-right: 0;
  box-shadow: none;
  background: transparent;
}

#hd .dropdown-menu.main-bg .dropdown-item:hover,
#hd .dropdown-menu.main-bg .dropdown-item:focus {
  background:
    linear-gradient(135deg,
      rgba(239,246,255,0.90),
      rgba(219,234,254,0.94)) !important;
  color: var(--text-primary) !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 26px rgba(15,23,42,0.35),
    0 0 0 1px rgba(191,219,254,0.95),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}

[data-bs-theme="dark"] #hd .dropdown-menu.main-bg .dropdown-item {
  color: #ffffffff !important;
  background: rgba(15,23,42,0.40) !important;
}

[data-bs-theme="dark"] #hd .dropdown-menu.main-bg .dropdown-item:hover,
[data-bs-theme="dark"] #hd .dropdown-menu.main-bg .dropdown-item:focus {
  color: #f9fafb !important;
  background:
    linear-gradient(135deg,
      rgba(30,64,175,0.95),
      rgba(8,47,73,0.98)) !important;
  box-shadow:
    0 16px 32px rgba(0,0,0,0.90),
    0 0 0 1px rgba(56,189,248,0.85),
    inset 0 0 0 1px rgba(15,23,42,0.9);
}

@media (max-width: 991.98px) {
  #hd .dropdown-menu.main-bg {
    max-width: min(480px, 96vw);
    border-radius: 22px !important;
  }

  #hd .dropdown-menu.main-bg .dropdown-item {
    padding: 0.75rem 1.1rem;
  }
}

/* ============================================
   11) 헤더 Glass 반사 + 리퀴드 하이라이트
   ============================================ */

#hd .navbar::before {
  content: "";
  position: absolute;
  inset: 2px 10px 6px;
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.05)
    ),
    radial-gradient(
      circle at 0% 0%,
      rgba(59,130,246,0.55),
      transparent 60%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(236,72,153,0.45),
      transparent 60%
    ),
    linear-gradient(
      115deg,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.45) 12%,
      rgba(255,255,255,0.10) 35%,
      rgba(255,255,255,0.0) 60%
    );

  background-blend-mode: screen, normal, normal, screen;

  background-size:
    100% 100%,
    120% 120%,
    120% 120%,
    230% 260%;
  background-position:
    center,
    center,
    center,
    -70% -190%;

  border: 1px solid rgba(255,255,255,0.65);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 18px 40px rgba(15,23,42,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.22);

  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);

  opacity: 0.98;
  pointer-events: none;
  z-index: -1;

  animation: headerSheen 16s ease-in-out infinite alternate;
}

[data-bs-theme="dark"] #hd .navbar::before {
  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,0.96),
      rgba(15,23,42,0.86)
    ),
    radial-gradient(
      circle at 0% 0%,
      rgba(56,189,248,0.55),
      transparent 60%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(129,140,248,0.55),
      transparent 60%
    ),
    linear-gradient(
      115deg,
      rgba(255,255,255,0.78) 0%,
      rgba(248,250,252,0.45) 12%,
      rgba(248,250,252,0.10) 35%,
      rgba(248,250,252,0.0) 60%
    );

  background-blend-mode: screen, normal, normal, screen;

  background-size:
    100% 100%,
    120% 120%,
    120% 120%,
    240% 260%;
  background-position:
    center,
    center,
    center,
    -75% -190%;

  border: 1px solid rgba(148,163,184,0.65);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 22px 60px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(148,163,184,0.28);

  backdrop-filter: blur(34px) saturate(210%);
  -webkit-backdrop-filter: blur(34px) saturate(210%);

  opacity: 0.98;
  pointer-events: none;
  z-index: -1;

  animation: headerSheen 18s ease-in-out infinite alternate;
}

#hd .navbar {
  box-shadow:
    var(--header-shadow-strong),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* 헤더 반사 하이라이트 애니메이션 */
@keyframes headerSheen {
  0% {
    background-position:
      center,
      center,
      center,
      -80% -190%;
  }
  50% {
    background-position:
      center,
      center,
      center,
      0% -165%;
  }
  100% {
    background-position:
      center,
      center,
      center,
      80% -190%;
  }
}

/* ─────────────────────────────
   로고(#logo) 리퀴드 플로팅 + 확대/축소
   ───────────────────────────── */

#logo img {
  animation:
    logoFloat 7s ease-in-out infinite,
    logoGlow 9s ease-in-out infinite;

  transform-origin: center center;
  transition:
    transform 0.35s ease-out,
    box-shadow 0.35s ease-out,
    filter 0.35s ease-out;
}

#logo:hover img {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.10) rotate(-1deg);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0),
    0 0 0 1px rgba(248,250,252,0.9),
    0 0 24px rgba(59, 131, 246, 0);
}

@keyframes logoFloat {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-7deg) scale(1.08);
  }
  50% {
    transform: rotate(0deg) scale(0.70);
  }
  75% {
    transform: rotate(7deg) scale(1.08);
  }
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(59,130,246,0.0));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(59,130,246,0.65));
  }
}
/* ============================================
   12) 메뉴 출렁이는 젤리 효과
   ============================================ */

/* 드롭다운이 아래로 떨어지면서 출렁 */
@keyframes jellyDropY {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.8, 1.15);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05, 0.95);
  }
  70% {
    transform: translateY(0) scale(0.97, 1.03);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* gnb 2단 서브메뉴용 살짝 더 작게 출렁 */
@keyframes jellyDropSub {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.85, 1.12);
  }
  40% {
    opacity: 1;
    transform: translateY(-1px) scale(1.04, 0.96);
  }
  70% {
    transform: translateY(0) scale(0.98, 1.02);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* 가운데 메인 드롭다운 카드용 */
@keyframes jellyMainCard {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.8, 1.18);
  }
  35% {
    opacity: 1;
    transform: translateY(-2px) scale(1.06, 0.94);
  }
  70% {
    transform: translateY(0) scale(0.97, 1.03);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* ───── 헤더 드롭다운에 출렁 애니메이션 추가 ───── */

/* 상단 navbar 안의 기본 드롭다운 */
#hd .dropdown-menu.show,
#hd .navbar .dropdown:hover > .dropdown-menu,
#hd #gnb .dropdown:hover > .dropdown-menu {
  animation: jellyDropY 0.45s cubic-bezier(.23, 1.52, .32, 1);
}

/* 가운데 메인 드롭다운 (공지/갤러리/유튜브/자유게시판) */
#hd .dropdown-menu.main-bg.show {
  animation: jellyMainCard 0.5s cubic-bezier(.23, 1.52, .32, 1);
}

/* gnb 2단 서브메뉴 (PC) */
#gnb .gnb_1dli:hover > .gnb_2dul,
.gnb_2dul[style*="display: block"] {
  animation: jellyDropSub 0.42s cubic-bezier(.23, 1.52, .32, 1);
}

/* ───── 메뉴 텍스트 pill도 살짝 출렁 ───── */

@keyframes jellyPill {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  40% {
    transform: translateY(-2px) scale(1.06, 0.95);
  }
  80% {
    transform: translateY(-1px) scale(0.98, 1.03);
  }
  100% {
    transform: translateY(-1px) scale(1, 1);
  }
}

/* 상단 nav-link hover 시 pill 출렁 */
#hd .navbar-nav .nav-link:hover,
#hd .navbar-nav .nav-link:focus {
  animation: jellyPill 0.32s cubic-bezier(.23, 1.52, .32, 1);
}

/* gnb 1단 메뉴 hover 시 pill 출렁 */
#gnb_1dul .gnb_1da:hover {
  animation: jellyPill 0.32s cubic-bezier(.23, 1.52, .32, 1);
}
/* =========================================================
   ✅ 1) 데스크톱: 드롭다운/서브메뉴 "스크롤만" 강제
   ✅ 2) 데스크톱: 2단/3단을 오른쪽 flyout → 아래로 펼치는 스택형으로 변경
   (모바일은 기존 @media 규칙 유지)
   ========================================================= */

@media (min-width: 992px){

  /* ---------- 스크롤: 메뉴가 길면 내부 스크롤 ---------- */
  :root{
    /* 너무 크게 잡히면 스크롤이 안 생길 수 있어서 'vh'를 보수적으로 */
    --menu-dd-max-h: min(70vh, 560px);
  }
  @supports (height: 100dvh){
    :root{ --menu-dd-max-h: min(70dvh, 560px); }
  }

  /* Bootstrap 드롭다운(1단) */
  #hd .dropdown-menu{
    max-height: var(--menu-dd-max-h) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 그누보드 2단(.gnb_2dul) */
  .gnb_2dul{
    max-height: var(--menu-dd-max-h) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* (선택) 스크롤바 살짝 정리 */
  #hd .dropdown-menu, .gnb_2dul{ scrollbar-width: thin; }
  #hd .dropdown-menu::-webkit-scrollbar,
  .gnb_2dul::-webkit-scrollbar{ width: 10px; }
  #hd .dropdown-menu::-webkit-scrollbar-thumb,
  .gnb_2dul::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.55);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  [data-bs-theme="dark"] #hd .dropdown-menu::-webkit-scrollbar-thumb,
  [data-bs-theme="dark"] .gnb_2dul::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.30);
  }

  /* ---------- 서브메뉴 스타일 변경: flyout(오른쪽) → 스택(아래) ---------- */

  /* 기존 flyout용 규칙(absolute/left:100%/transform/opacity)을 덮어씀 */
  #hd .dropdown-menu .dropdown > .dropdown-menu{
    position: static !important;     /* ✅ 오른쪽으로 빼지 않음 */
    left: auto !important;
    top: auto !important;

    display: none;                   /* 기본 숨김 */
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;

    margin: 6px 0 6px 0;
    padding: 6px;
    border-radius: 16px !important;

    /* “서브 메뉴 박스” 느낌 */
    border: 1px solid var(--surface-border);
    background: rgba(255,255,255,0.42);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: none;

    /* 깊이 구분 라인 */
    border-left: 3px solid rgba(148,163,253,.45);
  }

  [data-bs-theme="dark"] #hd .dropdown-menu .dropdown > .dropdown-menu{
    background: rgba(15,23,42,0.55);
    border-left-color: rgba(129,140,248,.45);
  }

  /* hover / show 시 아래로 펼침 */
  #hd .dropdown-menu .dropdown:hover > .dropdown-menu,
  #hd .dropdown-menu .dropdown.show  > .dropdown-menu{
    display: block;
  }

  /* 서브메뉴 아이템은 살짝 컴팩트하게 */
  #hd .dropdown-menu .dropdown > .dropdown-menu .dropdown-item{
    padding: 0.40rem 0.85rem;
    border-radius: 14px;
    margin: 2px 0;
  }

  /* 서브메뉴 안의 서브메뉴(3단 이상)도 살짝 더 인덴트 */
  #hd .dropdown-menu .dropdown > .dropdown-menu .dropdown > .dropdown-menu{
    margin-left: 8px;
    border-left-width: 3px;
  }
}
/* =========================================================
   13) 창 높이(뷰포트)에 따라:
   - 드롭다운/서브메뉴 max-height 자동 변화 → 넘치면 스크롤(overflow:auto)
   - 라운드/패딩/블러/아이템 간격도 함께 유동 변화
   - 서브메뉴는 스크롤과 궁합 좋은 “스택(아래로 펼침)” 유지
   ========================================================= */

/* (안전장치) 예전에 넣었던 화살표/가이드 흔적이 있으면 무력화 */
.dd-scroll-hint{ display:none !important; }

/* 모바일 주소창 변화 대응: 100vh 대신 100dvh 우선 */
:root{ --vh: 100vh; }
@supports (height: 100dvh){ :root{ --vh: 100dvh; } }

@media (min-width: 992px){

  /* 기본(창 높이 넉넉할 때): 더 고급스럽게 크게 */
  :root{
    /* 핵심: 창이 크면 max-height가 커져서 스크롤이 안 생김,
       창이 작으면 max-height가 줄어들어 스크롤이 자동으로 생김 */
    --dd-max-h: clamp(280px, calc(var(--vh) - var(--header-height) - 90px), 720px);

    --dd-radius: 30px;
    --dd-pad-y: 0.20rem;
    --dd-pad-x: 0.65rem;

    --dd-blur: 18px;
    --dd-sat: 160%;
  }

  /* 창 높이가 줄어들면: 더 컴팩트하게 */
  @media (max-height: 820px){
    :root{
      --dd-max-h: clamp(240px, calc(var(--vh) - var(--header-height) - 110px), 600px);
      --dd-radius: 22px;
      --dd-pad-y: 0.18rem;
      --dd-pad-x: 0.55rem;
      --dd-blur: 16px;
      --dd-sat: 155%;
    }
    #hd .dropdown-item{ padding: 0.44rem 0.82rem; }
  }

  /* 더 낮아지면: 아주 컴팩트 */
  @media (max-height: 700px){
    :root{
      --dd-max-h: clamp(210px, calc(var(--vh) - var(--header-height) - 130px), 500px);
      --dd-radius: 18px;
      --dd-pad-y: 0.14rem;
      --dd-pad-x: 0.48rem;
      --dd-blur: 14px;
      --dd-sat: 150%;
    }
    #hd .dropdown-item{ padding: 0.40rem 0.78rem; }
  }

  /* ✅ 스크롤 유동 적용(부트스트랩 드롭다운 + 그누보드 2단) */
  #hd .dropdown-menu,
  #hd .dropdown-menu.main-bg,
  .gnb_2dul{
    max-height: var(--dd-max-h) !important;
    overflow-y: auto !important;   /* 내용이 넘칠 때만 스크롤(자동) */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    border-radius: var(--dd-radius) !important;
  }

  /* ✅ 헤더 드롭다운(유리질감도 창 높이 따라 변함) */
  #hd .dropdown-menu{
    padding: var(--dd-pad-y) var(--dd-pad-x) !important;

    backdrop-filter: blur(var(--dd-blur)) saturate(var(--dd-sat));
    -webkit-backdrop-filter: blur(var(--dd-blur)) saturate(var(--dd-sat));
  }

  /* ✅ 스크롤바 톤(보이는 OS에서만) */
  #hd .dropdown-menu,
  #hd .dropdown-menu.main-bg,
  .gnb_2dul{
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.55) transparent;
  }
  #hd .dropdown-menu::-webkit-scrollbar,
  #hd .dropdown-menu.main-bg::-webkit-scrollbar,
  .gnb_2dul::-webkit-scrollbar{ width: 10px; }
  #hd .dropdown-menu::-webkit-scrollbar-thumb,
  #hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb,
  .gnb_2dul::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.55);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  [data-bs-theme="dark"] #hd .dropdown-menu::-webkit-scrollbar-thumb,
  [data-bs-theme="dark"] #hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb,
  [data-bs-theme="dark"] .gnb_2dul::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.30);
  }

  /* ✅ 서브메뉴(2단/3단) = 스택(아래로 펼침) — 스크롤/화면높이 문제에 가장 안정적 */
  #hd .dropdown-menu .dropdown > .dropdown-menu{
    position: static !important;
    left: auto !important;
    top: auto !important;

    display: none;                 /* 기본 숨김 */
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;

    margin: 6px 0;
    padding: 6px;

    border-radius: max(14px, calc(var(--dd-radius) - 10px)) !important;
    border: 1px solid var(--surface-border);

    background: rgba(255,255,255,0.42);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);

    box-shadow: none;
    border-left: 3px solid rgba(148,163,253,.45);
  }
  [data-bs-theme="dark"] #hd .dropdown-menu .dropdown > .dropdown-menu{
    background: rgba(15,23,42,0.55);
    border-left-color: rgba(129,140,248,.45);
  }

  #hd .dropdown-menu .dropdown:hover > .dropdown-menu,
  #hd .dropdown-menu .dropdown.show  > .dropdown-menu{
    display: block;
  }

  /* 낮은 창에서는 서브도 더 타이트하게 */
  @media (max-height: 760px){
    #hd .dropdown-menu .dropdown > .dropdown-menu{ padding: 4px; }
    #hd .dropdown-menu .dropdown > .dropdown-menu .dropdown-item{
      padding: 0.38rem 0.76rem;
      border-radius: 14px;
    }
  }

  /* (선택) 스크롤 가능한 메뉴에 페이드 마스크(항상 살짝 고급스럽게) */
  @supports (mask-image: linear-gradient(#000,#000)){
    #hd .dropdown-menu,
    #hd .dropdown-menu.main-bg,
    .gnb_2dul{
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    }
  }
}

/* ✅ 헤더도 창 높이 낮을 때 살짝 컴팩트 럭셔리하게 */
@media (max-height: 760px){
  #hd .navbar{ margin: 4px 8px 0; box-shadow: var(--header-shadow-soft); }
  #hd .navbar-nav .nav-link{ padding: 0.28rem 0.78rem; }
}
/* =========================================================
   MENU REDESIGN v3 (Liquid Aurora Glass)
   - 드롭다운/서브메뉴/gnb 배경/색/모양 전면 교체
   - 스크롤은 "필요할 때만" 자동 (overflow:auto + max-height)
   ========================================================= */

/* 1) 메뉴 전용 토큰 */
:root{
  --menu-radius: 26px;
  --menu-radius-inner: 18px;
  --menu-pad-y: 10px;
  --menu-pad-x: 12px;

  --menu-max-h: clamp(260px, calc(100dvh - var(--header-height) - 90px), 720px);

  /* 라이트: 오로라 글래스 */
  --menu-bg:
    radial-gradient(circle at 12% 0%, rgba(99,102,241,.22), transparent 55%),
    radial-gradient(circle at 92% 6%, rgba(236,72,153,.18), transparent 56%),
    radial-gradient(circle at 50% 110%, rgba(56,189,248,.14), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(245,250,255,.76), rgba(236,244,255,.70));

  --menu-border: rgba(15,23,42,.10);
  --menu-border-strong: rgba(99,102,241,.26);

  --menu-shadow:
    0 24px 70px rgba(15,23,42,.22),
    0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.22);

  --menu-item-bg: rgba(255,255,255,.12);
  --menu-item-border: rgba(15,23,42,.06);
  --menu-item-hover:
    radial-gradient(circle at 0% 0%, rgba(99,102,241,.22), rgba(236,72,153,.12) 55%, rgba(56,189,248,.10) 100%);
  --menu-item-active:
    linear-gradient(135deg, rgba(99,102,241,.32), rgba(236,72,153,.20));

  --menu-text: var(--text-primary);
  --menu-text-sub: var(--text-secondary);
}

/* 다크: 네온 오로라 글래스 */
[data-bs-theme="dark"]{
  --menu-bg:
    radial-gradient(circle at 12% 0%, rgba(139,92,246,.28), transparent 55%),
    radial-gradient(circle at 92% 6%, rgba(56,189,248,.20), transparent 58%),
    radial-gradient(circle at 50% 110%, rgba(236,72,153,.16), transparent 58%),
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(17,24,39,.86), rgba(2,6,23,.92));

  --menu-border: rgba(148,163,184,.18);
  --menu-border-strong: rgba(56,189,248,.26);

  --menu-shadow:
    0 28px 90px rgba(0,0,0,.82),
    0 0 0 1px rgba(2,6,23,.75),
    inset 0 0 0 1px rgba(148,163,184,.12);

  --menu-item-bg: rgba(255,255,255,.06);
  --menu-item-border: rgba(148,163,184,.10);
  --menu-item-hover:
    linear-gradient(135deg, rgba(56,189,248,.22), rgba(139,92,246,.16), rgba(236,72,153,.10));
  --menu-item-active:
    linear-gradient(135deg, rgba(56,189,248,.28), rgba(139,92,246,.20));

  --menu-text: #eef2ff;
  --menu-text-sub: rgba(229,231,235,.82);
}

/* 2) 부트스트랩 드롭다운(헤더 메뉴) 전체 외형 교체 */
#hd .dropdown-menu{
  background: var(--menu-bg) !important;
  border: 1px solid var(--menu-border) !important;
  border-radius: var(--menu-radius) !important;
  box-shadow: var(--menu-shadow) !important;

  padding: var(--menu-pad-y) var(--menu-pad-x) !important;

  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;

  /* 스크롤: 필요할 때만 자동 */
  max-height: var(--menu-max-h) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* 기존에서 "overflow:hidden" 때문에 답답하면 풀어줌 */
  transform-origin: top center;
}

/* 메뉴 상단 “유리 반사” */
#hd .dropdown-menu::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 20%, rgba(255,255,255,0) 55%),
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.28), transparent 60%);
  mix-blend-mode: screen;
  opacity: .55;
}

/* 메뉴 외곽 “오로라 엣지” */
#hd .dropdown-menu::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 0 0 1px var(--menu-border-strong);
  opacity: .8;
}

/* 3) 드롭다운 아이템 완전 교체 */
#hd .dropdown-item{
  color: var(--menu-text) !important;

  border-radius: var(--menu-radius-inner) !important;
  padding: 10px 12px !important;
  margin: 4px 0 !important;

  background: var(--menu-item-bg) !important;
  border: 1px solid var(--menu-item-border) !important;

  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
  transform: translateY(0);
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

/* 아이템 왼쪽 “글로우 점” */
#hd .dropdown-item span{
  position: relative;
  padding-left: 12px;
}
#hd .dropdown-item span::before{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), var(--accent-main));
  box-shadow: 0 0 14px rgba(99,102,241,.45);
  opacity: .85;
}

#hd .dropdown-item small{
  color: var(--menu-text-sub) !important;
  opacity: .95;
}

/* hover */
#hd .dropdown-item:hover,
#hd .dropdown-item:focus{
  background: var(--menu-item-hover) !important;
  border-color: rgba(99,102,241,.30) !important;

  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(15,23,42,.22),
    0 0 0 1px rgba(255,255,255,.25) !important;
}

/* active */
#hd .dropdown-item.active,
#hd .dropdown-item.active:hover,
#hd .dropdown-item.active:focus{
  background: var(--menu-item-active) !important;
  border-color: rgba(99,102,241,.40) !important;
  box-shadow:
    0 18px 36px rgba(15,23,42,.26),
    0 0 0 1px rgba(255,255,255,.35) !important;
}

/* divider */
#hd .dropdown-divider{
  border-top: 1px solid rgba(148,163,184,.22) !important;
  opacity: .9 !important;
  margin: 10px 0 !important;
}

/* 4) 가운데 main-bg 드롭다운도 동일한 “메뉴 카드”로 통일 */
#hd .dropdown-menu.main-bg{
  background: var(--menu-bg) !important;
  border: 1px solid var(--menu-border) !important;
  border-radius: var(--menu-radius) !important;
  box-shadow: var(--menu-shadow) !important;

  padding: var(--menu-pad-y) var(--menu-pad-x) !important;

  max-height: var(--menu-max-h) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* main-bg 아이템에 걸려있는 강제 배경(!important) 싹 덮기 */
#hd .dropdown-menu.main-bg .dropdown-item{
  background: var(--menu-item-bg) !important;
  border: 1px solid var(--menu-item-border) !important;
  color: var(--menu-text) !important;
}
#hd .dropdown-menu.main-bg .dropdown-item:hover,
#hd .dropdown-menu.main-bg .dropdown-item:focus{
  background: var(--menu-item-hover) !important;
  color: var(--menu-text) !important;
}

/* 5) 그누보드 서브(.gnb_2dul)도 동일 컨셉으로 교체 */
.gnb_2dul{
  background: var(--menu-bg) !important;
  border: 1px solid var(--menu-border) !important;
  border-radius: var(--menu-radius) !important;
  box-shadow: var(--menu-shadow) !important;

  max-height: var(--menu-max-h) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 10px 10px !important;
}

/* gnb 2단 링크 */
.gnb_2dul .gnb_2da{
  background: var(--menu-item-bg) !important;
  border: 1px solid var(--menu-item-border) !important;

  border-radius: var(--menu-radius-inner) !important;
  padding: 10px 12px !important;
  margin: 4px 0 !important;

  color: var(--menu-text) !important;

  transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.gnb_2dul .gnb_2da:hover{
  background: var(--menu-item-hover) !important;
  border-color: rgba(99,102,241,.30) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.22) !important;
}

/* 6) 스크롤바(보이는 OS에서만) */
#hd .dropdown-menu, #hd .dropdown-menu.main-bg, .gnb_2dul{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) transparent;
}
#hd .dropdown-menu::-webkit-scrollbar,
#hd .dropdown-menu.main-bg::-webkit-scrollbar,
.gnb_2dul::-webkit-scrollbar{ width: 10px; }
#hd .dropdown-menu::-webkit-scrollbar-thumb,
#hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb,
.gnb_2dul::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.55);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
[data-bs-theme="dark"] #hd .dropdown-menu::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] #hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .gnb_2dul::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.30);
}

/* 7) 창 높이가 낮아지면 메뉴가 더 컴팩트하게 “자동 변형” */
@media (max-height: 760px){
  :root{
    --menu-radius: 20px;
    --menu-radius-inner: 16px;
    --menu-pad-y: 8px;
    --menu-pad-x: 10px;
    --menu-max-h: clamp(220px, calc(100dvh - var(--header-height) - 120px), 520px);
  }
  #hd .dropdown-item{ padding: 9px 11px !important; }
  .gnb_2dul .gnb_2da{ padding: 9px 11px !important; }
}
/* =========================================================
   ✅ Dropdown scrollbar recolor (Bootstrap dropdown only)
   - 적용: #hd .dropdown-menu (main-bg 포함)
   - gnb(.gnb_2dul) 제외
   ========================================================= */

:root{
  --dd-scroll-track: rgba(15,23,42,.06);
  --dd-scroll-thumb: rgba(252, 4, 4, 0.55);       /* 기본 thumb */
  --dd-scroll-thumb-hover: rgba(236,72,153,.55); /* hover thumb */
}
[data-bs-theme="dark"]{
  --dd-scroll-track: rgba(2,6,23,.55);
  --dd-scroll-thumb: rgba(56,189,248,.38);
  --dd-scroll-thumb-hover: rgba(139,92,246,.55);
}

#hd .dropdown-menu,
#hd .dropdown-menu.main-bg{
  scrollbar-width: thin;
  scrollbar-color: var(--dd-scroll-thumb) var(--dd-scroll-track);
}

#hd .dropdown-menu::-webkit-scrollbar,
#hd .dropdown-menu.main-bg::-webkit-scrollbar{
  width: 12px;
}
#hd .dropdown-menu::-webkit-scrollbar-track,
#hd .dropdown-menu.main-bg::-webkit-scrollbar-track{
  background: var(--dd-scroll-track);
  border-radius: 999px;
}
#hd .dropdown-menu::-webkit-scrollbar-thumb,
#hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb{
  background: var(--dd-scroll-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#hd .dropdown-menu::-webkit-scrollbar-thumb:hover,
#hd .dropdown-menu.main-bg::-webkit-scrollbar-thumb:hover{
  background: var(--dd-scroll-thumb-hover);
}
/* =========================================================
   ✅ Dropdown scroll hint (Bootstrap dropdown only)
   - 부모 position 건드리지 않음 (헤더 안 깨짐)
   ========================================================= */

/* 스크롤이 생길 때만 위/아래 여백 확보 */
#hd .dropdown-menu[data-dd-scrollable="1"],
#hd .dropdown-menu.main-bg[data-dd-scrollable="1"]{
  padding-top: calc(var(--menu-pad-y, 10px) + 24px) !important;
  padding-bottom: calc(var(--menu-pad-y, 10px) + 24px) !important;
}

/* 힌트 바(오버레이) */
#hd .dropdown-menu .dd-more-hint{
  position: absolute;
  left: 10px;
  right: 10px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  pointer-events: none;
  user-select: none;
  z-index: 60;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;

  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

#hd .dropdown-menu .dd-more-hint__txt{ opacity: .82; }

#hd .dropdown-menu .dd-more-hint__ico{
  width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.18);
  box-shadow:
    0 10px 20px rgba(15,23,42,.20),
    inset 0 0 0 1px rgba(255,255,255,.20);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
[data-bs-theme="dark"] #hd .dropdown-menu .dd-more-hint__ico{
  background: rgba(2,6,23,.28);
  box-shadow:
    0 12px 24px rgba(0,0,0,.60),
    inset 0 0 0 1px rgba(148,163,184,.14);
}

#hd .dropdown-menu .dd-more-hint--top{ top: 6px; transform: translateY(-6px); }
#hd .dropdown-menu .dd-more-hint--bottom{ bottom: 6px; transform: translateY(6px); }

/* 스크롤 가능할 때만 표시 */
#hd .dropdown-menu[data-dd-scrollable="1"] .dd-more-hint{ opacity: .92; transform: translateY(0); }

/* 맨 위/아래면 해당 방향 숨김 */
#hd .dropdown-menu[data-dd-at-top="1"] .dd-more-hint--top{ opacity: 0 !important; transform: translateY(-8px) !important; }
#hd .dropdown-menu[data-dd-at-bottom="1"] .dd-more-hint--bottom{ opacity: 0 !important; transform: translateY(8px) !important; }

/* 모바일에서는 숨김 */
@media (max-width: 991.98px){
  #hd .dropdown-menu .dd-more-hint{ display:none !important; }
  #hd .dropdown-menu[data-dd-scrollable="1"],
  #hd .dropdown-menu.main-bg[data-dd-scrollable="1"]{
    padding-top: var(--menu-pad-y, 10px) !important;
    padding-bottom: var(--menu-pad-y, 10px) !important;
  }
}